<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LifeGame</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <label for="width">世界宽度</label>
    <input type="text" name="width" value="100" onchange="changeWorld('width', this)" />
    <label for="height">世界高度</label>
    <input type="text" name="height" value="100" onchange="changeWorld('height', this)" />
    <label for="size">细胞大小</label>
    <input type="text" name="size" value="4" onchange="changeWorld('size', this)" />
    <label for="speed">迭代速度</label>
    <input type="text" name="speed" value="200" onchange="changeWorld('speed', this)" />
    <br />
    <label for="alive">细胞颜色</label>
    <input type="text" name="alive" value="#000000" onchange="changeWorld('alive', this)" />
    <label for="dead">世界颜色</label>
    <input type="text" name="dead" value="#FFFFFF" onchange="changeWorld('dead', this)" />
    <br />
    <br />
    <button onclick="randomWorld()">随机世界</button>
    <button onclick="clearCanvas()">清空世界</button>
    <button onclick="startWorld()">开始运行</button>
    <button onclick="stopWorld()">暂停运行</button>
    <br />
    <br />
    <canvas id="world" width="0" height="0"></canvas>
    <script src="./utils.js"></script>
    <script src="./LifeGame.js"></script>
    <script src="./canvas.js"></script>
    <script>
      // 创建画布
      const { setCanvas, clearCanvas, execute } = createCanvas('world');
      // 创建世界
      const { initWorld, startWorld, stopWorld } = createWorld();
      // 系统配置
      const config = {
        width: 100, // 横向细胞数量
        height: 100, // 纵向细胞数量
        size: 4 + 1, // 细胞大小，细胞间距 1px
        speed: 200, // 细胞迭代速度
        alive: '#000000', // 细胞存活颜色
        dead: '#FFFFFF', // 世界颜色（细胞死亡颜色）
        data: new Map(), // 系统运行数据
        execute, // 更新画布方法
      };

      resetWorld();

      // 重置世界
      function resetWorld() {
        setCanvas(config); // 重置画布配置
        initWorld(config); // 重置世界配置
      }

      // 生成随机世界
      function randomWorld() {
        IterateCells(config, (x, y) => {
          // 随机定义生命状态
          const life = !!Math.round(Math.random());
          // 设置生命状态
          config.data.set(MakeKey(x, y), life);
          // 更新画布
          config.execute(x, y, life);

          return true;
        });
      }

      // 调整世界配置
      function changeWorld(type, input) {
        let valid;
        // 是否为颜色参数
        const isColor = type === 'alive' || type === 'dead';
        // 参数验证
        if (isColor) {
          valid = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/i.test(input.value);
        } else {
          valid = !isNaN(+input.value);
        }

        if (valid) {
          // 参数合法，修改系统设置
          if (isColor) {
            config[type] = input.value;
          } else if (type === 'size') {
            config[type] = +input.value + 1; // 增加细胞间距
          } else {
            config[type] = +input.value;
          }
          // 重置世界
          resetWorld();
        } else {
          // 非法参数，清空输入框
          input.value = '';
        }
      }
    </script>
  </body>
</html>
